<html>
    <head>
        {assign var='newitemcou' value=0}
        {assign var='page' value=$currpage}
        {assign var='idx' value=$curridx}

        {literal}
        <link href="css/style.css" rel="stylesheet" type="text/css" />
        <link href="../css/jquery-ui.css" type="text/css" rel="stylesheet"  />
        <link href="../css/jquery.window.css" type="text/css" rel="stylesheet"  />
        <style type="text/css">
            #tabgeneral,
            #taboverview,
            #tabitinerary,
            #tabdates,
            #tab_separator,
            #tabtravel,
            #tab_separator,
            #tabquestion {
                overflow: auto;
                background-color: transparent;
            }

            #sortable { list-style-type: decimal; margin: 10px; padding: 0; width: 80%; }
            #sortable li {
                margin: 10px 3px 3px 3px;
                padding: 0.4em;
                padding-left: 1.5em;
                font-size: 1.4em;
            }
            /* #sortable li span { position: absolute; margin-left: -1.3em; } */
        </style>
        {/literal}

        {assign var='save_mode' value=$save_mode}

        {foreach item=p from=$package}
            {assign var='pck' value=$p}
        {/foreach}

        {foreach item=d from=$dest}
            {append var='dest_ids' value=$d.id}
            {append var='dest_names' value=$d.country}
        {/foreach}

        {foreach item=c from=$cat}
            {append var='cat_ids' value=$c.id}
            {append var='cat_names' value=$c.package}
        {/foreach}

        {assign var=monthnames value=[1=>'Jan',2=>'Feb',3=>'Mar',4=>'Apr',5=>'May',6=>'Jun',7=>'Jul',8=>'Agt',9=>'Sep',10=>'Oct',11=>'Nov',12=>'Dec']}

        {assign var=years value=2010|range:2020}
        {assign var=yearnames value=2010|range:2020}

        {assign var=boolvalues value=[0=>'No',1=>'Yes']}

        <title></title>

        {literal}


        <script type="text/javascript" src="../js/tiny_mce/tiny_mce.js"></script>
        <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="../js/jquery-ui.js"></script>
        <script type="text/javascript" src="../js/jquery.ui.widget.js"></script>
        <script type="text/javascript" src="../js/jquery.ui.button.js"></script>
        <script type="text/javascript" src="../js/jquery.window.min.js"></script>

            <!-- <script type="text/javascript" src="../js/jquery.js"></script> -->
        <script type="text/javascript" src="../js/ajaxfileupload.js"></script>
        <script type="text/javascript">
            var lastId = -1;
                    
            $(document).ready(function () {
                tinyMCE.init({
                    // General options
                    height: "200",
                    mode : "textareas",
                    theme : "advanced",
                    plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave,visualblocks",

                    // Theme options
//                    theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
//                    theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
//                    theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
                    //theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft,visualblocks",
                    theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
                    theme_advanced_buttons2 : "bullist,numlist,|,outdent,indent,|,link,unlink,image,|,forecolor,backcolor,|,tablecontrols,|,hr,removeformat,|,sub,sup,|,charmap",
                    theme_advanced_toolbar_location : "top",
                    theme_advanced_toolbar_align : "left",
                    theme_advanced_statusbar_location : "bottom",
                    theme_advanced_resizing : true,

                    // Example content CSS (should be your site CSS)
                    content_css : "../css/content.css",

                    extended_valid_elements : "hr[class|width|size|noshade]",
                    file_browser_callback : "ajaxfilemanager",
                    paste_use_dialog : false,
                    theme_advanced_resize_horizontal : true,
                    apply_source_formatting : true,
                    force_br_newlines : true,
                    force_p_newlines : false,
                    relative_urls : false,
                    remove_script_host : false
                    //document_base_url : "http://http://127.0.0.1:8080/ATS/source",
                    //document_base_url : "/ATS/source",
                });

                function ajaxfilemanager(field_name, url, type, win) {
                    var view = 'thumbnail';
                    var ajaxfilemanagerurl = "../js/tiny_mce/plugins/ajaxfilemanager/ajaxfilemanager.php?view=" + view;

                    //window.open(ajaxfilemanagerurl);
                    switch (type) {
                        case "image":
                            break;
                        case "media":
                            break;
                        case "flash":
                            break;
                        case "file":
                            break;
                        default:
                            return false;
                    }

                    var fileBrowserWindow = new Array();
                    fileBrowserWindow["file"] = ajaxfilemanagerurl;
                    fileBrowserWindow["title"] = "Ajax File Manager";
                    fileBrowserWindow["width"] = "782";
                    fileBrowserWindow["height"] = "440";
                    fileBrowserWindow["close_previous"] = "no";

                    tinyMCE.activeEditor.windowManager.open({
                        url: ajaxfilemanagerurl,// "../js/tiny_mce/plugins/ajaxfilemanager/ajaxfilemanager.php?view=" + view,
                        width: 782,
                        height: 440,
                        inline : "yes",
                        close_previous : "no"
                    },{
                        window : win,
                        input : field_name
                    });
                    return false;
                }

                $("#tabs").tabs();
                        
                $( "#sortable" ).sortable();
                $( "#sortable" ).disableSelection();
                    
                $( "#sortable" ).bind( "sortchange", function(event, ui) {
                    var list = $('#sortable').sortable('toArray');
                    //alert(list[0]);
                });
                        
                        
                    
                var $allListElements = $("ol").children();
                lastId=$allListElements.length;
                $('#list_count').attr('value', lastId);

            });
                    
            function addSortable() {
                if (lastId <= 0) {
                    var $allListElements = $("ol").children();
                    lastId=$allListElements.length;
                } else lastId++;
                    
                id = lastId;
                        
                var removeLink = "<a href='#' onclick='removeSortable("+id+")';>Remove</a>";
                var newItem = "<li class='ui-state-default' id=li_itinerary"+id+">"+
                    "<textarea name=itinerary" +id+ " id=itinerary"+id+" style='width: 60%'></textarea>"+removeLink+"</li>";
                $("#sortable").append(newItem);
                //$("#sortable").refresh();
                tinyMCE.execCommand('mceAddControl',false,'itinerary'+id);
                        
                $('#list_count').attr('value', lastId);
                        
                        
                var arrSortable = $("#sortable").sortable('toArray');
                jQuery.each(arrSortable, function(index, value) {
                  alert(index + ': ' + value);
                });
                //lastId++;
            }
                
            function removeSortable(id) {
                $("#li_itinerary"+id).remove();
                    
                $('#list_count').attr('value', lastId);
                        
                var arrSortable = $("#sortable").sortable('toArray');
                jQuery.each(arrSortable, function(index, value) {
                  alert(index + ': ' + value);
                });
            }
                    
            function goback() {
                document.location='packagelist.php?p={/literal}{$page}{literal}&r={/literal}{$idx}{literal}';
            }
                    
            function ajaxFileUpload()
            {
                    
                $("#loading")
                .ajaxStart(function(){
                    $(this).show();
                })
                .ajaxComplete(function(){
                    $(this).hide();
                });
                        
                $.ajaxFileUpload ({
                    url:'doajaxfileupload.php',
                    secureuri:false,
                    fileElementId:'fileToUpload',
                    dataType: 'json',
                    data:{name:'logan', id:'id'},
                    success: function (data, status)
                    {
                        if(typeof(data.error) != 'undefined')
                        {
                            if(data.error != '')
                            {
                                alert(data.error);
                            }else
                            {
                                //$("#uploadresult").value = 'ok';
                                //alert($('#uploadresult').attr('src'));
                                $('#packageimg').attr('src', data.msg);
                                $('#imgfilename').attr('innerHTML', data.msg);
                                $('#txtimgfile').attr('value', 'backend/'+data.msg);
                            }
                        }
                    },
                    error: function (data, status, e)
                    {
                        alert(e);
                    }
                })
                return false;
            }
        </script>

        {/literal}
    </head>
    <body>
        <form method="post" action="savepackage.php">
            <h1>Package</h1>
            <input type="hidden" name="save_mode" value="{$save_mode}" />
            <input type="hidden" name="currpage" value="{$page}" />
            <input type="hidden" name="curridx" value="{$idx}" />

            <div id='tabs'>
                <ul>
                    <li><a href="#tabgeneral">GENERAL</a></li>
                    <li><a href="#taboverview">OVERVIEW</a></li>
                    <li><a href="#tabitinerary">ITINERARY</a></li>
                    <li><a href="#tabdates">DATES & PRICES</a></li>
                    <li><a href="#tabtravel">TRAVEL DOCUMENT</a></li>
                </ul>

                <div id='tabgeneral'>
                    <table border="0" cellspacing="0" cellpadding="5" width="100%">
                        <tr>
                            <td width="15%"><label>Id</label></td>
                            <td>{$pck.id} <input type="hidden" name="txtid" id="txtid" value="{$pck.id}" /></td>
                        </tr>
                        <tr>
                            <td><label>Title</label></td>
                            <td>
                                <input 
                                    type="text" 
                                    class="txt3"
                                    id="txtTitle" 
                                    name="txtTitle" 
                                    value="{$pck.title}" />
                            </td>
                        </tr>
                        <tr>
                            <td><label>Period</label></td>
                            <td>
                                {html_options class='cbo1' name='monthStart' id='monthStart' options=$monthnames selected=$pck.monthstart}
                                {html_options class='cbo1' name='yearStart' id='yearStart' values=$years output=$yearnames selected=$pck.yearstart}
                                &nbsp; to &nbsp;
                                {html_options class='cbo1' name='monthEnd' id='monthEnd' options=$monthnames selected=$pck.monthend}
                                {html_options class='cbo1' name='yearEnd' id='monthEnd' values=$years output=$yearnames selected=$pck.yearend}
                            </td>
                        </tr>
                        <tr>
                            <td><label>Price Start From</label></td>
                            <td>
                                <input type="text" 
                                       class="txt0"
                                       id="txtCurrency" 
                                       name="txtCurrency" 
                                       value="{$pck.currency}" />
                                <input type="text" 
                                       class="txt1"
                                       id="txtPrice" 
                                       name="txtPrice" 
                                       value="{$pck.pricestart|number_format:0:",":"."}" />
                            </td>
                        </tr>
                        <tr>
                            <td><label>Destination</label></td>
                            <td>
                                {html_options class='cbo2' name='optDest' id='optDest' values=$dest_ids output=$dest_names selected=$pck.dest_id}
                            </td>
                        </tr>
                        <tr>
                            <td><label>Category</label></td>
                            <td>
                                {html_options class='cbo2' name='optCat' id='optCat' values=$cat_ids output=$cat_names selected=$pck.cat_id}
                            </td>
                        </tr>
                        <tr>
                            <td><label>Special Offer</label></td>
                            <td>
                                {html_checkboxes 
                                    name='isspecialoffer'
                                    options=$boolvalues
                                    selected=$pck.isspecialoffer
                                    separator='<br />'}
                            </td>
                        </tr>
                        <tr>
                            <td><label>Image</label></td>
                            <td>
                                <input type="hidden" id="txtimgfile" name="txtimgfile" value="{$pck.image}" />

                                <div id='imgfilename'>{$pck.image}</div>
                                <img id='packageimg' src={"../"|cat:$pck.image} />                                

                                <div>
                                    <form name="form" action="" method="POST" enctype="multipart/form-data">
                                        Change Image <input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input" />
                                        <button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button>
                                    </form>
                                    <img id="loading" src="../images/loading.gif" style="display:none;" />
                                </div>

                                <!-- <a href="#" onclick="openUploadWindow();">Change image</a> -->
                            </td>
                        </tr>
                    </table>
                </div>
                <div id='taboverview'>
                    <table border="0" cellspacing="0" cellpadding="5" width="100%">
                        <tr>
                            <td width="15%"><label>Title</label></td>
                            <td>
                                <textarea name="txtOvTitle" 
                                          id="txtOvTitle"
                                          rows="10"
                                          cols="80"
                                          style="width: 80%">
                                    {$pck.title}
                                </textarea>

                            </td>
                        </tr>
                        <tr>
                            <td><label>Period</label></td>
                            <td>
                                <input type="text" 
                                       class="txt3"
                                       id="txtOvPeriod" 
                                       name="txtOvPeriod" 
                                       value="{$pck.ov_period}" />
                            </td>
                        </tr>

                        <tr>
                            <td><label>Bonus</label></td>
                            <td>
                                <input type="text" 
                                       class="txt3"
                                       id="txtOvBonus" 
                                       name="txtOvBonus" 
                                       value="{$pck.ov_bonus}" />
                            </td>
                        </tr>

                        <tr>
                            <td><label>Highlight</label></td>
                            <td>
                                <textarea name="txtOvHighlight" 
                                          id="txtOvHighlight"
                                          rows="10"
                                          cols="80"
                                          style="width: 80%">
                                    {$pck.ov_highlight}
                                </textarea>
                            </td>
                        </tr>
                        <tr>
                            <td><label>Notice</label></td>
                            <td>
                                <textarea name="txtOvNotice" 
                                          id="txtOvNotice"
                                          rows="10"
                                          cols="80"
                                          style="width: 80%">
                                    {$pck.ov_notice}
                                </textarea>
                            </td>
                        </tr>
                    </table>
                </div>
                <div id='tabitinerary'>
                    <input type="text" id="list_count" value="0" />

                    <a href="#" onclick="addSortable();">Add new item</a>

                    <ol id="sortable">
                        {assign var='itencou' value=1}
                        {foreach item=it from=$iten}
                        <li class="ui-state-default" id="li_itinerary{$itencou}">
                            <textarea name="itinerary{$itencou}"
                                      id="itinerary{$itencou}"
                                      style="width: 60%">
                                    {$it.detail}
                            </textarea>
                            <a href="#" onclick="removeSortable({$itencou});">Remove</a>
                        </li>

                            {$itencou = $itencou + 1}
                            {$newitemcou = $itencou}
                        {/foreach}
                    </ol>
                </div>
                <div id='tabdates'>
                    <table border="0" cellspacing="0" cellpadding="5" width="100%">
                        <tr>
                            <td width="15%"><label>Departure dates</label></td>
                            <td>
                                <textarea name="txtDaDepdate" 
                                          id="txtDaDepdate"
                                          rows="10"
                                          cols="80"
                                          style="width: 80%">
                                    {$pck.da_depdate}
                                </textarea>

                            </td>
                        </tr>
                        <tr>
                            <td><label>Price Label</label></td>
                            <td>
                                <input type="text" 
                                       class="txt4"
                                       id="txtDaPriceLabel" 
                                       name="txtDaPriceLabel" 
                                       value="{$pck.da_pricelabel}" />
                            </td>
                        </tr>
                        <tr>
                            <td width="15%"><label>Extra Prices</label></td>
                            <td>
                                <textarea name="txtDaExtraPrices" 
                                          id="txtDaExtraPrices"
                                          rows="10"
                                          cols="80"
                                          style="width: 80%">
                                    {$pck.da_extraprice}
                                </textarea>

                            </td>
                        </tr>
                    </table>
                </div>
                <div id='tabtravel'>
                    <table border="0" cellspacing="0" cellpadding="5" width="100%">
                        <tr>
                            <td width="15%"><label>Embassy Address</label></td>
                            <td>
                                <input type="text" 
                                       class="txt5"
                                       id="txtTrEmbAddress" 
                                       name="txtTrEmbAddress" 
                                       value="{$pck.tr_embaddress}" />
                            </td>
                        </tr>

                        <tr>
                            <td width="15%"><label>Embassy Phone</label></td>
                            <td>
                                <input type="text" 
                                       class="txt2"
                                       id="txtTrEmbPhone" 
                                       name="txtTrEmbPhone" 
                                       value="{$pck.tr_embphone}" />
                            </td>
                        </tr>

                        <tr>
                            <td width="15%"><label>Embassy Fax</label></td>
                            <td>
                                <input type="text" 
                                       class="txt2"
                                       id="txtTrEmbFax" 
                                       name="txtTrEmbFax" 
                                       value="{$pck.tr_embfax}" />
                            </td>
                        </tr>

                        <tr>
                            <td width="15%"><label>Processing Requirement</label></td>
                            <td>
                                <textarea name="txtTrReq" 
                                          id="txtTrReq"
                                          rows="10"
                                          cols="80"
                                          style="width: 80%">
                                    {$pck.tr_requirement}
                                </textarea>

                            </td>
                        </tr>

                        <tr>
                            <td width="15%"><label>Notes</label></td>
                            <td>
                                <textarea name="txtTrNotes" 
                                          id="txtTrNotes"
                                          rows="10"
                                          cols="80"
                                          style="width: 80%">
                                    {$pck.tr_notes}
                                </textarea>

                            </td>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="toolbar">
                <input type="submit" value="SAVE" class="button" />
                <input type="button" value="CLOSE" class="button" onclick="goback();" />
            </div>
        </form>
    </body>
</html>
